<template>
	<!-- padding-bottom: 200rpx; // .btn-content 高度 + tabs-loadmore-text 高度 -->
	<view class="container" :style="{ paddingBottom: actionList.length ? '200rpx' : '0', paddingTop: `${getSystemInfo.navBarHeight}px`}">
		
		<navBar 
			title="我的咨询"
			:show-home="false"
			:custom-back="true"
			@back="handleBack"
		/>
	
		<view class="msg-content" v-if="msgData.length" >
			<view class="mc-item" v-for="item in msgData" :key="item.id" @click="handleMsgDetail(item.id)">
				<view class="mcil-info">
					<text v-if="item.classify">【 {{ item.classify }} 】</text>
					{{ item.title || ''}}
				</view>
				<view class="mcil-btm">
					<view class="mcilb-desc">
						{{ item.createdTime ? item.createdTime.split(' ')[0] : '' }}
					</view>
					<view class="mcilb-desc" :style="{ color: item.status === 1 ? 'rgba(246, 139, 83, 0.85)' : 'rgba(30, 196, 138, 0.85)'}">
						{{ item.status === 1 ? '待回复' : '已回复' }}
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="tabs-loadmore-text" v-if="showLoadMore">{{ loadMoreText }}</view>
		<view v-if="!msgData.length" class="empty">
		 <image src="@/static/empty.png"></image>
		 <text>无数据</text>
		</view>
		
		<!-- 底部按钮 -->
		<view class="btn-content" v-if="actionList.length">
			<u-button type="primary" text="在线咨询" @click="handleOnline"></u-button>
		</view>
		
		<u-action-sheet
			class="action-sheet"
			:show="actionShow"
			:actions="actionList"
			round="16"
			:closeOnClickAction="true"
			:closeOnClickOverlay="true"
			cancelText="取消"
			cancelTextClass="cancelTextClass"
			@select="selectClick"
			@close="selectCancel"
			></u-action-sheet>
		
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import navBar from '@/components/navBar.vue'
	
	export default {
		components: {
			navBar
		},
		data() {
			return {
				msgData: [],
				total: 0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				formDatas: {
					pageNum: 1,
					pageSize: 10,
				},
				actionShow: false,
				actionList: []
			};
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
			...mapGetters('global', ['getSystemInfo']),
		},
		onShow(){
			this.msgData = []
			this.actionList = []
			this.getMsgListData()
			this.handleGetPublishItemList()
		},
		methods: {
			// 自定义页面左上角返回的逻辑
			handleBack(){
				uni.redirectTo({
				  url: `/carePack/index/index`
				})
			},
			async handleGetPublishItemList(){
				const res = await this.$request({
					method: 'GET',
				  url: '/ltb-center/loveitem/app/getPublishItemList',
				})
				// this.actionList = res.datas && res.datas.length && res.datas.reduce((pre, cur) => {
				// 	const obj = {
				// 		name: cur.consultTitle,
				// 		type: cur.itemType,
				// 		id: cur.id
				// 	}
				// 	pre.push(obj)
				// 	return pre
				// }, [])
				res.datas && res.datas.length && res.datas.forEach(i => {
					if(i.consultFlag){
						this.actionList.push({
							name: i.consultTitle,
							type: i.itemType,
							id: i.id
						})
					}
				})
			},
			selectCancel(){
				this.actionShow = false
			},
			async selectClick(data){
				// 选择的是法律援助，需要判断会员等级为vip及以上
				if(data.type === 2){
					const flag = await this.checkQua(data.type)
					if(flag){
						uni.navigateTo({
						  url: `/carePack/leaveMessage/lawConsult?itemType=${data.type}&itemId=${data.id}`
						})
					}else {
						uni.showToast({
							title: '您还不是VIP用户，暂无法使用该项功能',
							icon: 'none'
						})
					}
				}else{
					// 教育援助
					uni.navigateTo({
					  url: `/carePack/leaveMessage/educationConsult?itemType=${data.type}&itemId=${data.id}`
					})
				}
			},
			// 获取项目咨询资格
			checkQua(itemType){
				return new Promise((resolve, reject) => {
					this.$request({
						method: 'GET',
					  url: '/ltb-center/loveitem/app/validConsultPerm',
						data: {
							itemType
						}
					}).then(res => {
						resolve(res.datas)
					}).catch(res => {
						reject(res.datas)
					})
				})
			},
			handleOnline(){
				this.actionShow = true
			},
			handleMsgDetail(id){
				uni.navigateTo({
				  url: `/carePack/leaveMessage/leaveMsgDetail?questionId=${id}`
				})
			},
			async getMsgListData(){
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'POST',
				  url: '/ltb-center/carFriendQuestion/userList',
					data: {
						...this.formDatas
					}
				})
				this.msgData = this.msgData.concat(res.datas.data)
				this.total = res.datas.count
				uni.hideLoading()
				uni.stopPullDownRefresh();
			},
		},
		onReachBottom() {
			if (this.msgData.length >= this.total) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			this.formDatas.pageNum += 1
			this.getMsgListData()
		},
		onPullDownRefresh() {
			this.msgData = []
			this.formDatas.pageNum = 1
			this.getMsgListData();
		},
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	.type-content {
		position: fixed;
		left: 0;
		box-sizing: border-box;
		background-color: #f5f5f5;
		padding: 20rpx;
		/deep/ .u-tabs__wrapper__nav__line {
			margin-left: 5%;
		}
	}
	
	.msg-content {
		padding: 24rpx 20rpx 0;
		box-sizing: border-box;
		.mc-item {
			// &:not(:nth-last-child(1)){
				margin-bottom: 20rpx;
			// }
			box-sizing: border-box;
			padding: 46rpx 32rpx 38rpx;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-color: #fff;
			.mcil-info {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.85);
				text-shadow: 0 0 0.1px currentColor;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.mcil-btm {
					margin-top: 52rpx;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.45);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.mcilb-desc {
						display: flex;
						align-items: center;
					}
				}
		}
	}

	.btn-content {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		background-color: #ffffff;
		width: 100%;
		height: 178rpx;
		padding: 30rpx 32rpx 0;
		box-sizing: border-box;
	}
	
	// 无内容
	.empty {
		width: 100%;
		height: 80vh;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		image {
			width: 220px;
			height: 180px;
		 }
		text {
			font-size: 30rpx;
			color: rgba(0,0,0,0.45);
			line-height: 30rpx;
		}
	}
	
	// 加载中、
	.tabs-loadmore-text {
		text-align: center;
		padding: 10px;
	}


	// action-sheet
	.action-sheet {
		/deep/ .u-reset-button .u-action-sheet__item-wrap__item .u-action-sheet__item-wrap__item__name {
			color: rgba(0, 0, 0, 0.85);
		}
		/deep/ .u-gap {
			height: 20rpx !important;
			background-color: #F6F6F7 !important;
		}
		/deep/ .cancelTextClass {
			padding: 30rpx 16rpx 68rpx;
			background-color: #ffffff;
		}
		/deep/ .u-action-sheet__cancel-text {
			padding: 26rpx 0;
			background-color: rgba(207, 26, 27, 1);
			color: #ffffff;
			border-radius: 8rpx;
		}
	}
	
}
</style>
